<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:频道页面
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806
 -->
<template>
	<view class="body">
		<!-- 顶部开始 -->
		<view class="head-wrapper shadow" :style="{'padding-top': `${statusBarHeight}px`}">
			<view class="nav">
				<view class="title-wrap">
					<text class="uni-title">热门用户</text>
				</view>
				<view class="seach" @click="seach">
					<!-- <image src="/static/home/seach.png" mode="widthFix"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部结束 -->
	
		<scroll-view scroll-y="true" class="content-wrapper" :style="{'top': `${statusBarHeight}px`}">
			<view class="links-list">
						  <view class="links-list-box">
							    <view class="links-item"  v-for=" (item,index) in paihangData" @click="goinfo(item.uid)">
									 <view class="links-item-thumbs">
										 <view> <text v-if="index==0">点赞最多</text> <text v-if="index==1">最热前五</text></view>
										 <view class="links-icon"><image src="/static/img/m-arrow.png"></image></view>
									 </view>
									  <view class="links-item-word">
										  <view  class="l-i-w-icon"> <image style="width: 100%;height: 100%;border-radius: 50%;" :src="formatUrl(item.img)"></image></view>
										  <view class="l-i-w-title">{{item.name}}</view>
										  <!-- <view class="l-i-w-b">top.1</view> -->
									  </view>
								</view>
					
						  </view>
			</view>
			
			<view class="typp-list-wrapper">
				<view class="type-item2" v-for="(item,idx) in paihangData2" :key="idx" @click="goinfo(item.uid)">
					<image :src="formatUrl(item.img)" mode="aspectFill"></image>
					<view class="type-top">TOP{{idx+3}}</view>
				</view>
			</view>
			 <view class="typp-list-t"> <image src="../../../static/allfenlei.png" style="width: 44rpx;height: 50rpx;vertical-align: middle;margin-right: 10rpx;" mode="aspectFill" ></image> 全部分类</view>
			<view class="typp-list-wrapper">
				<view class="type-item" v-for="(item,idx) in typeList" :key="idx" @tap="tapItem(item)">
					<image :src="formatUrl(item.icon)"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<advert-page v-if="advert!=undefined&&advert.length>3" :src="advert[3].img" :showAd="showAd" :adUrl="advert[3].ad_url"
			 :openType="advert[3].open_type" @close="closeAd"></advert-page>
		</scroll-view>
	</view>
</template>

<script>
	import advertPage from "@/components/advert/advert-page.vue"
	import { mapGetters } from 'vuex'
	
	export default {
		components: {
			advertPage
		},
		data() {
			return {
				showAd: true,
				isMore: true,
				loadmore: false,
				typeList: [],
		     	paihangData:[],
				paihangData2:[],
			}
		},
		computed: {
			...mapGetters(['statusBarHeight']),
			advert() {
				return this.$store.state.advert.page
			}
		},
		created() {
			this.initData()
			this.getDate();  
		},
		onShow() {
			this.showAd = true;
			this.getDate();
		},
		methods: {
			getDate(){
				this.$api.videoList({
						'type':'hot',
				}).then((res) => {
				this.paihangData=res.data.data.slice(0,2)
				this.paihangData2=res.data.data.slice(2,5)
				// this.tabList[key].videoList = res.data.data;
				// if (res.data.data.length < 20) {
				// 	this.tabList[key].loadmore = false;
				// 	this.tabList[key].isMore = false;
				// }
				
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: '获取失败,' + res.msg,
						icon: "none"
					});
				})
			},
			seach() {
				uni.navigateTo({
					url: '/pages/index/user/category-search/category-search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goinfo(id){
				uni.navigateTo({
					url: '/pages/index/user/other?uid='+id
				})
			},
			initData() {
				uni.showLoading({
					title: '正在加载...',
					mask: false
				});
				this.$api.typeList({}).then((res) => {
					uni.hideLoading()
					console.log(res)
					this.typeList = res.data.data
				}).catch(err => {
					uni.hideLoading()
				})
			},
			tapItem(item) {
				this.$store.commit('setSubType', item);
				uni.navigateTo({
					url: '/pages/index/channel/subTypeList/index'
				})
			},
			//格式化链接地址
			formatUrl(url) {
				if (url == undefined) {
					return;
				}
				var index = url.indexOf("http");
				if (index == 0) {
					return url;
				}
				return this.$store.state.baseUrl + url;
			},
			closeAd() {
				this.showAd = false;
			}
		}
	}
</script>

<style lang="scss">

	.links-list{
		padding-top: 30rpx;
		.links-list-box{
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding-left: 32rpx;
				padding-right: 32rpx;
			.links-item{
				width: 40%;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding-left: 24rpx;
				padding-right: 24rpx;
				border: 1px solid #E6E6E6;
				.links-item-word{
					display: flex;
					margin-top: 28rpx;
					align-items: center;
					.l-i-w-icon{
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
							background-color: #222222;
							image{
								width: 100%;
								height: 100%;
							}
					}
					.l-i-w-title{
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						margin-right: 10rpx;
						margin-left: 10rpx;
					}
					.l-i-w-b{
					width: 84rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: #222222;
					border-radius: 20rpx;
						font-size: 16rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
				.links-item-thumbs{
					display: flex;
	
					padding-top: 16rpx;
					 justify-content: space-between;
					.links-icon{
						width: 24rpx;
						height: 24rpx;
						image{
							width: 100%;
							height: 100%;
						}
						
					}
				}
			}
		}
	
	}
	.body {
		background-image: url(../../../static/chabg.png) no-repeat;
		background-size: cover;
		height: 100%;
	
		box-sizing: border-box;
	}

	.head-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		z-index: 1;
	}
	.nav {
		display: flex;
		flex-direction: row;
		height: 88rpx;
	}

	.content-wrapper {
		position: fixed;
		bottom: 120rpx;
		padding-top: 88rpx;
	}

	.shadow {
		// box-shadow: 0 1px 6px #ccc;
	}

	.title-wrap {
		flex: 11;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.uni-title {
		margin-left: 70rpx;
	}

	.seach {
		flex: 1;
		display: flex;
		flex-direction: row;
		position: relative;
		right: 0rpx;
		justify-content: flex-end;
		align-items: center;

		image {
			display: inline-block;
			width: 35rpx;
			height: 25rpx;
			margin-right: 25rpx;

		}
	}
	.typp-list-t{
	font-size: 34rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #222222;

		margin-top: 60rpx;
		padding-left: 32rpx;
	}
	.typp-list-wrapper {
		margin-top: 24rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 32rpx;
		padding-right: 32rpx;
		justify-content: space-between;

		.type-item {
			height: 360rpx;
			justify-content: center;
			align-items: center;
			align-content: center;
			width: 33.33%;
			display: flex;
			flex-direction: column;

			image {
				width: 216rpx;
				height: 240rpx;
				border-radius: 16rpx;
			}

			text {
				margin-top: 12rpx;
				letter-spacing: 4rpx;
			}
		}
		.type-item2 {
			position: relative;
			// height: 400rpx;
			justify-content: center;
			align-items: center;
			align-content: center;
			width: 33.33%;
			display: flex;
			flex-direction: column;
			.type-top{
				position: absolute;
				left: 20rpx;
				top: 5rpx;
				width: 71rpx;
				height: 40rpx;
				background: rgba(34, 34, 34,.5);
				border-radius: 16rpx 0px 8rpx 0px;
			
				font-size: 24rpx;
				font-family: DINAlternate-Bold, DINAlternate;
			
				color: #FFFFFF;
			}
			image {
				width: 216rpx;
				height: 288rpx;
				border-radius: 16rpx;
			}
		
			text {
				margin-top: 12rpx;
				letter-spacing: 4rpx;
			}
		}
	}
	page {
		height: 100vh;
	}
</style>
